<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <title>智慧食堂</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
 
<link rel="stylesheet" href="../css/appTree.css">    
<link rel="stylesheet" href="../css/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/angular-ui-tree/2.22.5/angular-ui-tree.css"> 
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular-ui-tree/2.22.5/angular-ui-tree.js"></script> 

<script type="text/ng-template" id="nodes_renderer">
 <div ui-tree-handle class="tree-node tree-node-content">
    <a class="btn btn-success btn-xs " ng-if="node.child && node.child.length > 0" data-nodrag ng-click="toggle(this)">
    <span class="glyphicon"
        ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span></a>
    {{node.name}}
	<a class="pull-right btn btn-primary btn-xs" data-nodrag="" ng-click="newSubItem(this)" style="margin-right: 8px;">
		<span class="glyphicon glyphicon-plus"></span>
	</a>
 </div>
  <ol ui-tree-nodes="" ng-model="node.child" ng-class="{hidden: collapsed}">
    <li ng-repeat="node in node.child" ui-tree-node ng-include="'nodes_renderer'">
    </li>
  </ol>
</script>
<div ng-controller="MyController">
    <div ui-tree id="tree-root" class="ng-scope angular-ui-tree" data-drag-enabled="false">
      <ol ui-tree-nodes ng-model="data" class="ng-pristine ng-untouched ng-valid ng-scope angular-ui-tree-nodes">
        <li ng-repeat="node in data" ui-tree-node ng-include="'nodes_renderer'" class="ng-scope angular-ui-tree-node" collapsed="false">
        </li>
      </ol>
    </div>
</div>
<script>
var myAppModule = angular.module('MyApp', ['ui.tree']);
myAppModule.controller('MyController', function($scope) {
    $scope.treeOptions = {
        accept: function(sourceNodeScope, destNodesScope, destIndex) {
            return true;
        }
    }
  $scope.data = [
  {
    "id": 1,
    "name": "蔬菜",
    "child": [
      {
        "id": 11,
        "name": "土豆",
        "child": [
          {
            "id": 111,
            "name": "土豆丝",
            "child": []
          }
        ]
      },
      {
        "id": 12,
        "name": "node1.2",
        "child": []
      }
    ]
  },
  {
    "id": 2,
    "name": "node2",
    "child": [
      {
        "id": 21,
        "name": "node2.1",
        "child": []
      },
      {
        "id": 22,
        "name": "node2.2",
        "child": []
      }
    ]
  },
  {
    "id": 3,
    "name": "node3",
    "child": [
      {
        "id": 31,
        "name": "node3.1",
        "child": []
      }
    ]
  }
];
});
// 页面加载完成后,再加载模块
angular.bootstrap(document,["MyApp"]);
</script>
    </body>
</html>